<template>
    <div class="content-wrapper">
        <el-row class="content-row">
            <el-col class="height-init" :span="24">
                <div class="container">
                    <el-row class="handle-box">
                        <el-input v-model="query.showTopic" class="handle-input mr10" placeholder="节目主题"/>
                        <el-select style="width: 100px" v-model="query.menuId" class="mr10 ml10" clearable
                                   placeholder="请选择栏目">
                            <el-option
                                    v-for="item in menus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-date-picker
                                :editable="false"
                                placeholder="上架时间"
                                class="mr10"
                                v-model="query.createTime"
                                type="date">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-setting" @click="resetQueryForm">重置</el-button>
                        <el-button type="primary" icon="el-icon-plus" v-if="checkAuth(auths.add)" class="handle-del" @click="addVideo">新增</el-button>
                    </el-row>
                    <el-row class="list-table-row">
                        <el-table
                            :data="tableData"
                            border
                            class="table"
                            ref="multipleTable"
                            height="100%"
                            header-cell-class-name="table-header"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column type="index" width="50" align="center"></el-table-column>
                            <el-table-column prop="menuName" width="120"  label="栏目名称" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="showTopic" width="200"  label="节目主题" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="bigImage" width="100"  label="首页大图" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    <el-popover
                                            placement="left"
                                            title=""
                                            trigger="click">
                                        <img :src="origin+'/'+scope.row.bigImage" width="400" height="400" />
                                        <img slot="reference" :src="origin+'/'+scope.row.bigImage" width="30" height="20" style="margin-right: 3px;"/>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column prop="smallImage" width="100"  label="精彩配图" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    <el-popover
                                            placement="left"
                                            title=""
                                            trigger="click">
                                        <img :src="origin+'/'+scope.row.smallImage" width="400" height="400" />
                                        <img slot="reference" :src="origin+'/'+scope.row.smallImage" width="30" height="20" style="margin-right: 3px;"/>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" width="100"  label="状态" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.status ==0">草稿</span>
                                    <span v-if="scope.row.status ==1">已上架</span>
                                    <span v-if="scope.row.status ==2">已下架</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="liveUrl" width="160"  label="播放地址" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="createTime" width="200"  label="创建时间" show-overflow-tooltip>
                                <template slot-scope="scope" >
                                    {{renderTime(scope.row.createTime)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="240" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" v-if="checkAuth(auths.update)" icon="el-icon-edit" @click="openEditDialog(scope.row)" >编辑</el-button>
                                    <el-button type="text" v-if="checkAuth(auths.delete)" icon="el-icon-delete" @click="deleteVideo(scope.row)" >删除</el-button>
                                    <el-button type="text" v-if="checkAuth(auths.down) && scope.row.status ==1" icon="el-icon-delete" @click="downVideo(scope.row)" >下架</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <el-row class="pagination-self">
                        <el-pagination
                            background
                            layout="total, sizes, prev, pager, next"
                            :current-page="query.pageNo"
                            :page-size="query.pageSize"
                            :total="pageTotal"
                            @size-change="handleSizeChange"
                            @current-change="handlePageChange"
                        ></el-pagination>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 新增弹出框 -->
        <el-dialog title="新增视频" :visible.sync="addVisible" width="32%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
                <el-row>
                    <el-form-item label="栏目名称" prop="menuId">
                        <el-select v-model="addForm.menuId" class="form-input" clearable placeholder="请选择栏目">
                            <el-option
                                    v-for="item in menus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="节目主题"  prop="showTopic">
                        <el-input v-model="addForm.showTopic" class="form-input" placeholder="建议13字以内,不得超过20个中文字"></el-input>
                    </el-form-item>
                    <el-form-item label="视频地址"  prop="liveUrl">
                        <el-input v-model="addForm.liveUrl" class="form-input" placeholder="请输入正确的视频地址"></el-input>
                    </el-form-item>
                    <el-form-item label="首页大图" prop="bigImage">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :class="{disabled:uploadNum==1}"
                                :limit="limit"
                                :file-list="list"
                                :before-upload="beforeUpload"
                                :on-preview="function (file){return handlePictureCardPreview(file,1)}"
                                :on-success="function (res,file){return successUpload(res,file,1)}"
                                :on-remove="function (file,fileList){return handleRemove(file,fileList,1)}">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" size="tiny">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        <div>图片建议比例:343*128像素,大小<=2M</div>
                    </el-form-item>
                    <el-form-item label="看精彩配图" prop="smallImage">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :class="{disabled:uploadNumSmall==1}"
                                :limit="limit"
                                :file-list="listSmall"
                                :before-upload="beforeUpload"
                                :on-preview="function (file){return handlePictureCardPreviewSmall(file,1)}"
                                :on-success="function (res,file){return successUploadSmall(res,file,1)}"
                                :on-remove="function (file,fileList){return handleRemoveSmall(file,fileList,1)}">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleSmall" size="tiny">
                            <img width="100%" :src="dialogImageUrlSmall" alt="">
                        </el-dialog>
                        <div>图片建议比例:165*112像素,大小<=2M</div>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveVideo('addForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑视频" :visible.sync="editVisible" width="32%" v-loading.fullscreen.lock="fullscreenLoading">
            <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
                <el-row>
                    <el-form-item label="栏目名称" prop="menuId">
                        <el-select v-model="editForm.menuId" class="form-input" clearable placeholder="请选择栏目">
                            <el-option
                                    v-for="item in menus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="节目主题"  prop="showTopic">
                        <el-input v-model="editForm.showTopic" class="form-input" placeholder="建议13字以内,不得超过20个中文字"></el-input>
                    </el-form-item>
                    <el-form-item label="视频地址"  prop="liveUrl">
                        <el-input v-model="editForm.liveUrl" class="form-input" placeholder="请输入正确的视频地址"></el-input>
                    </el-form-item>
                    <el-form-item label="首页大图" prop="bigImage">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :class="{disabled:uploadNum==1}"
                                :limit="limit"
                                :file-list="list"
                                :before-upload="beforeUpload"
                                :on-preview="function (file){return handlePictureCardPreview(file,2)}"
                                :on-success="function (res,file){return successUpload(res,file,2)}"
                                :on-remove="function (file,fileList){return handleRemove(file,fileList,2)}">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" size="tiny">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        <div>图片建议比例:343*128像素,大小<=2M</div>
                    </el-form-item>
                    <el-form-item label="看精彩配图" prop="smallImage">
                        <el-upload
                                :action="uploadUrl"
                                list-type="picture-card"
                                :class="{disabled:uploadNumSmall==1}"
                                :limit="limit"
                                :file-list="listSmall"
                                :before-upload="beforeUpload"
                                :on-preview="function (file){return handlePictureCardPreviewSmall(file,2)}"
                                :on-success="function (res,file){return successUploadSmall(res,file,2)}"
                                :on-remove="function (file,fileList){return handleRemoveSmall(file,fileList,2)}">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisibleSmall" size="tiny">
                            <img width="100%" :src="dialogImageUrlSmall" alt="">
                        </el-dialog>
                        <div>图片建议比例:165*112像素,大小<=2M</div>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateVideo('editForm')">确 定</el-button>
            </span>
        </el-dialog>

    </div>

</template>

<script>
import {fetchPageList, menuList, saveVideo, editVideo, deleteVideo} from '../../../api/media/videoList'

export default {
    name: 'mediaHostList',
    data() {
        return {
            origin:'https://lht.ah-zk.com/qjt/fs/origin',
            uploadUrl:'https://lht.ah-zk.com/qjt/fs/file/upload',
            limit:1,
            menus:[],

            uploadNum:0,
            list:[],
            dialogImageUrl: '',
            dialogVisible: false,

            uploadNumSmall:0,
            listSmall:[],
            dialogImageUrlSmall: '',
            dialogVisibleSmall: false,

            addVisible:false,
            editVisible:false,
            fullscreenLoading: false,
            addForm:{
                showTopic:'',
                menuId:'',
                liveUrl:'',
                bigImage:'',
                smallImage:''
            },
            editForm:{
                showTopic:'',
                menuId:'',
                liveUrl:'',
                bigImage:'',
                smallImage:''
            },
            curRow:{},
            query: {
                pageNo: 1,
                pageSize: 20,
                showTopic:'',
                menuId:'',
                createTime:''
            },
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            },
            addRules: {
                showTopic: [
                    { required: true, message: '请输入节目主题', trigger: ['blur','change'] }
                ],
                liveUrl: [
                    { required: true, message: '请输入视频地址', trigger: ['blur','change'] }
                ],
                menuId:[
                    { required: true, message: '请选择栏目', trigger: ['blur','change'] }
                ],
                bigImage:[
                    { required: true, message: '请上传首页大图', trigger: ['blur','change'] }
                ],
                smallImage:[
                    { required: true, message: '请上传精彩配图', trigger: ['blur','change'] }
                ]
            },
            editRules: {
                showTopic: [
                    { required: true, message: '请输入节目主题', trigger: ['blur','change'] }
                ],
                liveUrl: [
                    { required: true, message: '请输入视频地址', trigger: ['blur','change'] }
                ],
                menuId:[
                    { required: true, message: '请选择栏目', trigger: ['blur','change'] }
                ],
                bigImage:[
                    { required: true, message: '请上传首页大图', trigger: ['blur','change'] }
                ],
                smallImage:[
                    { required: true, message: '请上传精彩配图', trigger: ['blur','change'] }
                ]
            },
        };
    },
    activated(){
        this.pageInit();
        this.menuInit();
    },
    created() {
        this.pageInit();
        this.menuInit();
    },
    props:['auths'],
    methods: {
        downVideo(row){
            this.$confirm('确定要下架吗？', '提示', {
                type: 'warning'
            }).then(() => {
                deleteVideo({id:row.id,operation:'obtained'}).then(res => {
                    if (res.code == '0') {
                        this.$message.success('下架成功');
                        this.pageInit();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
            }).catch(() => {});
        },
        deleteVideo(row){
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                deleteVideo({id:row.id,operation:'deleted'}).then(res => {
                    if (res.code == '0') {
                        this.$message.success('删除成功');
                        this.pageInit();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
            }).catch(() => {});
        },
        /**
         * 更新视频信息
         * @param formName
         */
        updateVideo(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fullscreenLoading=true;
                    editVideo(this.editForm).then(res => {
                        console.log(res);
                        if (res.code == '0') {
                            this.uploadNum =0;
                            this.uploadNumSmall =0;
                            this.list = [];
                            this.listSmall =[];
                            this.editVisible = false;
                            this.fullscreenLoading=false;
                            this.$message({
                                message: '编辑成功',
                                type: 'success'
                            });
                            this.pageInit();
                        } else {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 保存视频信息
         * @param formName
         */
        saveVideo(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.fullscreenLoading=true;
                    saveVideo(this.addForm).then(res => {
                        console.log(res);
                        if (res.code == '0') {
                            this.uploadNum =0;
                            this.uploadNumSmall =0;
                            this.addVisible = false;
                            this.fullscreenLoading=false;
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.pageInit();
                        } else {
                            this.fullscreenLoading=false;
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        menuInit(){
            menuList({type:2}).then(res=>{
                this.menus = res.data
            })
        },
        addVideo(){
            this.list = [];
            this.listSmall =[];
            this.resetForm('addForm');
            this.addVisible = true;
        },
        //文件上传时做文件大小判断
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 <= 2
            if(!isLt2M) {
                this.$message({
                    message: '上传文件大小不能超过 2M!',
                    type: 'warning'
                });
            }
            return isLt2M;
        },

        //图片上传删除图片
        handleRemove(file, fileList, type) {
            this.uploadNum=0;
        },
        //图片放大方法
        handlePictureCardPreview(file, type) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传成功回调
        successUpload(response,file, type){
            let f = response.files[0];
            if(type==1){
                this.addForm.bigImage = f.fingerprint;
            }else if(type==2){
                this.editForm.bigImage = f.fingerprint;
            }
            this.uploadNum=1;
        },

        //图片上传删除图片
        handleRemoveSmall(file, fileList, type) {
            this.uploadNumSmall=0;
        },
        //图片放大方法
        handlePictureCardPreviewSmall(file, type) {
            this.dialogImageUrlSmall = file.url;
            this.dialogVisibleSmall = true;
        },
        //图片上传成功回调
        successUploadSmall(response, file, type){
            let f = response.files[0];
            if(type==1){
                this.addForm.smallImage = f.fingerprint;
            }else if(type==2){
                this.editForm.smallImage = f.fingerprint;
            }
            this.uploadNumSmall=1;
        },
        resetQueryForm(){
            this.query = {
                pageNo: 1,
                pageSize: 20,
                showTopic:'',
                menuId:'',
                createTime:''
            }
            this.fetchTableData();
        },
        pageInit(){
            this.fetchTableData();
        },
        openEditDialog(row){
            this.list = [];
            this.listSmall =[];
            Object.assign(this.editForm,row);
            let json ={
                name:'aa',
                url:this.origin+"/"+row.bigImage
            }
            this.list.push(json);
            let json_ ={
                name:'bb',
                url:this.origin+"/"+row.smallImage
            }
            this.listSmall.push(json_);
            this.uploadNum=1;
            this.uploadNumSmall =1;
            this.editVisible = true;
        },
        //搜索条件方法
        handleSearch(){
            this.query.pageNo = 1;
            this.fetchTableData();
        },
        // 表格数据查询方法
        fetchTableData(){
            let that = this;
            fetchPageList(that.query).then(res=>{
                if(res.code == '0'){
                    that.tableData = res.data.records;
                    that.pageTotal = res.data.total;
                }
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页方法
        handlePageChange(val) {
            this.query.pageNo = val;
            this.fetchTableData();
        },
        // 分页大小改变方法
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.fetchTableData();
        },
    },
};
</script>

<style scoped>

    .content-wrapper{
        height:100%;
        overflow-y: hidden;
    }

    .content-row{
        height: 100%;
    }

    .cityTree{
        overflow-y: scroll;
    }

    .height-init{
        height: 100%;
    }

    .container{
        height: 100%;
    }

    .handle-box {
        height: 6.5%;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }

    .list-table-row{
        height:83%;
    }

    .table {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .pagination-self{
        height:10%;
        text-align: right;
        margin-top: 5px;
    }

    .form-input{
        width:80%;
    }
</style>
